<template>
  <div class="message">
    <div class="title">消息管理</div>
    <msgItem>
      <template>
        <div class="sub-title">收到待办工单</div>
        <div class="mgs-tip">收到待处理的工单，对处理人进行提醒</div>
      </template>
      <template #switch>
        <el-switch v-model="form.todoStatus" :active-value="1" :inactive-value="0" @change="save"></el-switch>
      </template>
    </msgItem>
    <msgItem :value="form.gottenStatus" @input="save">
      <template>
        <div class="sub-title">收到可领取的工单</div>
        <div class="mgs-tip">收到可领取的工单，对有权限领取的成员进行提醒</div>
      </template>
      <template #switch>
        <el-switch v-model="form.gottenStatus" :active-value="1" :inactive-value="0" @change="save"></el-switch>
      </template>
    </msgItem>
    <msgItem :value="form.returnStatus">
      <template>
        <div class="sub-title">收到被回退的工单</div>
        <div class="mgs-tip">收到被回退的工单，对处理人进行提醒</div>
      </template>
      <template #switch>
        <el-switch v-model="form.returnStatus" :active-value="1" :inactive-value="0" @change="save"></el-switch>
      </template>
    </msgItem>
    <msgItem :value="form.createMessageStatus">
      <template>
        <div class="sub-title">创建工单收到留言</div>
        <div class="mgs-tip">创建的工单收到留言</div>
      </template>
      <template #switch>
        <el-switch v-model="form.createMessageStatus" :active-value="1" :inactive-value="0" @change="save"></el-switch>
      </template>
    </msgItem>
    <msgItem :value="form.todoMessageStatus">
      <template>
        <div class="sub-title">待办工单收到留言</div>
        <div class="mgs-tip">待办的工单收到留言</div>
      </template>
      <template #switch>
        <el-switch v-model="form.todoMessageStatus" :active-value="1" :inactive-value="0" @change="save"></el-switch>
      </template>
    </msgItem>
    <div class="tip-way">
      <div class="sub-title">提醒方式</div>
      <el-checkbox-group v-model="form.noticeTypeList" @change="save">
        <el-checkbox :label="1">站内信提醒</el-checkbox>
        <el-checkbox :label="3">企业微信</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { commonAction } from '@/utils/common';
import msgItem from './msgItem.vue'
@Component({
  name: 'message',
  components: {
    msgItem
  }
})
export default class extends Vue {
  [x: string]: any;
  private id = ''
  private form = {
    createMessageStatus: 1,
    todoMessageStatus: 1,
    gottenStatus: 1,
    returnStatus: 1,
    todoStatus: 1,
    noticeTypeList: [],
    urgeStatus: 0
  }

  private save (v) {
    this.$emit('input', v)
    const params = Object.assign({}, this.form, {
      modelId: this.$route.params.businessId
    })
    commonAction({ url: `/server-work/action/message/config/${this.id ? 'update' : 'insert'}`, method: 'post', data: params }).then(res => {
      if (res.success) {
        this.$message.success('修改成功！')
      }
    })
  }

  private beforeMount () {
    commonAction({ url: `/server-work/action/message/config/search?modelId=${this.$route.params.businessId}`, method: 'get' }).then(res => {
      if (res.success) {
        console.log(res)
        this.id = res.data.id
        const { todoMessageStatus, createMessageStatus, gottenStatus, returnStatus, todoStatus, noticeTypeList, urgeStatus } = res.data
        this.form = {
          createMessageStatus: createMessageStatus === null ? 1 : createMessageStatus,
          todoMessageStatus: todoMessageStatus === null ? 1 : todoMessageStatus,
          gottenStatus: gottenStatus === null ? 1 : gottenStatus,
          returnStatus: returnStatus === null ? 1 : returnStatus,
          todoStatus: todoStatus === null ? 1 : todoStatus,
          noticeTypeList: noticeTypeList || [],
          urgeStatus: urgeStatus || 0
        }
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
.message {
  padding: 24px
  .title {
    margin-bottom: 24px
    font-weight: 600;
    color: #303753;
    font-size: 14px
  }
  .sub-title {
    font-weight: 400;
    color: #303753;
    margin-bottom: 10px
  }
  .mgs-tip {
    font-weight: 400;
    color: #767E91;
  }
}
</style>
